<!-- html代码 结构 -->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      智慧城市大气环境监测平台
    </div>
    <!-- 体部 -->
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="charts">
            <!-- 2.使用Left1组件  -->
            <Left1></Left1>
          </div>
          <div class="charts">
            <Left2></Left2>
          </div>
        </div>
        <div class="center">
          <Map></Map>
        </div>
        <div class="right">
          <div class="charts">
            <Right1></Right1>
          </div>
          <div class="charts">
            <Right2></Right2>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="charts">
          <Bottom1></Bottom1>
        </div>
        <div class="charts">
          <Bottom2></Bottom2>
        </div>
        <div class="charts">
          <Bottom3></Bottom3>
        </div>
        <div class="charts">
          <Bottom4></Bottom4>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 交互行为 js代码  -->
<script setup>
// 1.引入组件页面 
import Left1 from './components/Left1.vue'
import Left2 from './components/Left2.vue'
import Right1 from './components/Right1.vue'
import Right2 from './components/Right2.vue'
import Bottom1 from './components/Bottom1.vue'
import Bottom2 from './components/Bottom2.vue'
import Bottom3 from './components/Bottom3.vue'
import Bottom4 from './components/Bottom4.vue'
import Map from './components/Map.vue'
</script>
<!-- 样式 css代码 -->
<style scoped lang="less">
.header {
  width: 100%;
  height: 60px;
  background-image: url('../assets/layout/header.png');
  background-size: 100% 200px;
  font-size: 28px;
  color: white;
  text-align: center;
}

// 体部样式 
.content {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;

  .top {
    flex: 2;
    display: flex;

    .left,
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;

      // &表示直接父元素 
      &>div {
        flex: 1;
      }
    }

    .center {
      flex: 2;
      background-image: url('../assets/layout/chart_center_box_bg.png');
      background-size: 100% 100%;
      margin: 0px 5px 10px 5px;
    }
  }

  .bottom {
    flex: 1;
    display: flex;

    &>div {
      flex: 1;
    }
  }

  .charts {
    background-image: url('../assets/layout/chart_box_bg.png');
    background-size: 100% 100%;
    color: white;
    padding: 10px;
    margin: 0px 5px 10px 5px;
  }
}</style>